<template>
	 <view class="container">
		<!-- 商品图片轮播 -->
		<SlideImage :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" />
		<!-- 商品信息 -->
		<view class="goods-info m-top20">
		  <!-- 价格、销量 -->
		  <view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
		    <view class="block-left dis-flex flex-y-center">
		      <!-- 商品售价 -->
		      <text class="floor-price__samll">￥</text>
		      <text class="floor-price">{{ goods.goods_price_min }}</text>
		      <!-- 会员价标签 -->
		      <view v-if="goods.is_user_grade" class="user-grade">
		        <text>会员价</text>
		      </view>
		      <!-- 划线价 -->
		      <text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text>
		    </view>
		    <view class="block-right dis-flex">
		      <!-- 销量 -->
		      <view class="goods-sales">
		        <text>已售{{ goods.goods_sales }}件</text>
		      </view>
		    </view>
		  </view>
		  <!-- 标题、分享 -->
		  <view class="info-item info-item__name dis-flex flex-y-center">
		    <view class="goods-name flex-box">
		      <text class="twoline-hide">{{ goods.goods_name }}</text>
		    </view>
		    <view class="goods-share__line"></view>
		    <view class="goods-share">
		      <button class="share-btn dis-flex flex-dir-column" @click="onShowShareSheet()">
				<u-icon name="/static/share.png" size="20"></u-icon>
		        <text>分享</text>
		      </button>
		    </view>
		  </view>
		  <!-- 商品卖点 -->
		  <view v-if="goods.selling_point" class="info-item info-item_selling-point">
		    <text>{{ goods.selling_point }}</text>
		  </view>
		</view>
		<!-- 选择商品规格 -->
		<view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
		  <view class="spec-list dis-flex flex-x-between flex-y-center">
		    <view class="flex-box">
		      <text>选择：</text>
		      <text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text>
		    </view>
		    <u-icon name="arrow-right" color="#d1d1d1" size="20"></u-icon>
		  </view>
		</view>
		<!-- 商品服务 -->
		<Service :goods-id="goodsId" />
		<!-- 商品描述 -->
		<view class="goods-content m-top20">
		  <view class="item-title b-f">
			<text>商品描述</text>
		  </view>
		  <view v-if="goods.content != ''" class="goods-content__detail b-f" v-html="goods.content" />
		</view>
		<!-- 底部选项卡 -->
		<view class="footer-fixed">
		  <view class="footer-container">
		    <!-- 导航图标 -->
		    <view class="foo-item-fast">
		      <!-- 首页 -->
		      <view class="fast-item fast-item--home" @click="onTargetHome">
		        <view class="fast-icon">
		          <u-icon name="/static/home.png" size="22"></u-icon>
		        </view>
		        <view class="fast-text">
		          <text>首页</text>
		        </view>
		      </view>
		      <!-- 客服 -->
		      <customer-btn :cardTitle="goods.goods_name" :cardImage="goods.goods_image">
		        <view class="fast-item">
		          <view class="fast-icon">
		            <u-icon name="/static/service.png" size="22"></u-icon>
		          </view>
		          <view class="fast-text">
		            <text>客服</text>
		          </view>
		        </view>
		      </customer-btn>
		      <!-- 购物车 -->
		      <view class="fast-item fast-item--cart" @click="onTargetCart">
		        <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
		        </view>
		        <view class="fast-icon">
		          <u-icon name="/static/cart.png" size="22"></u-icon>
		        </view>
		        <view class="fast-text">
		          <text>购物车</text>
		        </view>
		      </view>
		    </view>
		    <!-- 操作按钮 -->
		    <view class="foo-item-btn">
		      <view class="btn-wrapper">
		        <view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
		          <text>加入购物车</text>
		        </view>
		        <view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
		          <text>立即购买</text>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
		<!-- 商品SKU弹窗 -->
		<SkuPopup ref="skuPopup" :goods="goods" @addCart="onAddCart"/>
	</view>
</template>

<script>
	import SlideImage from './components/SlideImage'
	import Service from './components/Service'
	import CustomerBtn from '@/components/customer-btn'
	import SkuPopup from './components/SkuPopup'
	export default {
		components: {
		  SlideImage,
		  Service,
		  CustomerBtn,
		  SkuPopup
		},
		data() {
			return {
				// 当前商品ID
				goodsId: null,
				// 是否支持加入购物车
				isEnableCart: false,
				// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
				skuMode: 1,
				// 商品详情
				goods: {
					goods_id: 10022,
					video: null,
					videoCover: null,
					goods_images: [
					    {
					        "file_id": 10080,
					        "file_type": 10,
					        "preview_url": "https://static.yoshop.xany6.com/2018071717370507f183424.jpg",
					        "external_url": "https://static.yoshop.xany6.com/2018071717370507f183424.jpg"
					    },
						{
						    "file_id": 10079,
						    "file_type": 10,
						    "preview_url": "https://static.yoshop.xany6.com/20180717172606d9aee7835.jpg",
						    "external_url": "https://static.yoshop.xany6.com/20180717172606d9aee7835.jpg"
						}
					],
					goods_price_min: "1399.00",
					is_user_grade: false,
					line_price_min: "0.00",
					goods_sales: 0,
					goods_name: "荣耀9i 4GB+64GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待",
					selling_point:"",
					spec_type:20,
					stock_total: 969,
					content: '<p><img width="100%" src="https://m.360buyimg.com/mobilecms/jfs/t20842/114/772658709/51280/97cce0f1/5b175981N7290ead0.jpg"/></p><p><img width="100%" src="https://m.360buyimg.com/mobilecms/jfs/t20566/33/742373676/46768/fb7a4cc4/5b17599cNea911d0e.jpg"/></p><p><img width="100%" src="https://m.360buyimg.com/mobilecms/jfs/t21448/12/771050934/55571/1207e815/5b1759ddN64ebf417.jpg"/></p>',
					specList: [
					    {
					        "spec_id": 10001,
					        "spec_name": "颜色",
					        "key": 0,
					        "valueList": [
					            {
					                "key": 0,
					                "groupKey": 0,
					                "spec_value_id": 10018,
					                "spec_value": "幻夜黑"
					            },
					            {
					                "key": 1,
					                "groupKey": 0,
					                "spec_value_id": 10019,
					                "spec_value": "魅海蓝"
					            },
					            {
					                "key": 2,
					                "groupKey": 0,
					                "spec_value_id": 10020,
					                "spec_value": "梦幻紫"
					            }
					        ]
					    },
					    {
					        "spec_id": 10002,
					        "spec_name": "版本",
					        "key": 1,
					        "valueList": [
					            {
					                "key": 0,
					                "groupKey": 1,
					                "spec_value_id": 10021,
					                "spec_value": "全网通4+64G"
					            }
					        ]
					    },
					    {
					        "spec_id": 10004,
					        "spec_name": "套装",
					        "key": 2,
					        "valueList": [
					            {
					                "key": 0,
					                "groupKey": 2,
					                "spec_value_id": 10022,
					                "spec_value": "官方标配"
					            },
					            {
					                "key": 1,
					                "groupKey": 2,
					                "spec_value_id": 10023,
					                "spec_value": "耳机套装"
					            }
					        ]
					    }
					]
				},
				cartTotal: 0
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
		  this.goodsId = Number(options.id)
		  console.log('this.goodsId', this.goodsId)
		},
		
		methods: {
			/**
			 * 显示/隐藏SKU弹窗
			 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			 */
			onShowSkuPopup(skuMode = 1) {
			  const app = this
			  if (app.isEnableCart) {
			    app.skuMode = skuMode
			  } else {
			    app.skuMode = 3
			  }
			  this.$refs.skuPopup.open()
			},
			// 跳转到首页
			onTargetHome(e) {
			  this.$navTo('pages/index/index')
			},
			
			// 跳转到购物车页
			onTargetCart() {
			  this.$navTo('pages/cart/index')
			},
			// 更新购物车数量
			onAddCart(total) {
			  this.cartTotal = total
			}
		}
	}
</script>

<style lang="scss" scoped>
  @import "./detail.scss";
</style>
